<template>
  <a-modal
    class="preview-modal"
    :visible="visible"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    @cancel="closeModal(false)"
    @ok="handleOk"
    width="450px"
  >
    <div class="title">
      {{ opration == "agree" ? "退款通过" : "退款驳回" }}!
    </div>
    <div class="patation">
      {{
        opration == "agree"
          ? "确认通过后将不可进行修改"
          : "确认驳回后将不可进行修改"
      }}
    </div>

    <div class="rule">
      <a-textarea
        :placeholder="
          opration == 'agree'
            ? '请输入通过理由，（必填，最多50字）'
            : '请输入驳回理由，（必填，最多50字）'
        "
        :rows="4"
        :max-length="50"
        v-model="formData.note"
        :style="{
          border: checkValue && !formData.note ? '1px solid red' : '',
        }"
      />
      <span class="limitWords" v-if="formData.note"
        >{{ formData.note.length || 0 }}/50</span
      >
      <span class="limitWords" v-else>0/50</span>
    </div>
  </a-modal>
</template>
<script>
export default {
  name: "checkRefund",
  props: {
    visible: {
      // 是否显示弹窗
      type: Boolean,
      default: false,
    },
    //退款id
    orderId: {
      type: String,
      default: "",
    },
    opration: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      //   nonte: "", //审核理由
      formData: {},
      checkValue: false,
    };
  },
  watch: {
    visible(y) {
      if (y) {
      } else {
        this.checkValue = false;
        this.formData = {};
      }
    },
  },
  methods: {
    closeModal(bool) {
      this.$emit("cancel", bool);
    },
    handleOk() {
      if (!this.formData.note) {
        this.checkValue = true;
        this.$message.error("请输入通过理由");
      } else {
        let params = {
          id: this.orderId,
          note: this.formData.note,
        };
        if (this.opration == "agree") {
          this.confirmTK(params);
        } else {
          this.refuseTK(params);
        }
      }
    },
    // 允许退款
    async confirmTK(params) {
      // 调仅退款的接口/order/goodsrepairs/agree/refund
      let res = await this.$post("/order/goodsrepairs/agree/refund", params);
      if (res && res.returnCode == 1000) {
        // console.log(res);
        this.$message.success("审核已通过");
        this.$emit("cancel", false);
        this.$emit("closeModal", false);
        this.$emit("getList");
      }
    },
    //驳回退款
    async refuseTK(params) {
      let res = await this.$post("/order/goodsrepairs/refused/refund", params);
      if (res && res.returnCode == 1000) {
        this.$message.success("审核已驳回");
        this.$emit("cancel", false);
        this.$emit("closeModal", false);
        this.$emit("getList");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.title {
  text-align: center;
  font-size: 20px;
}
.patation {
  text-align: center;
  margin-top: 5px;
  margin-bottom: 7px;
}
.rule {
  position: relative;
  width: 400px;
  .limitWords {
    position: absolute;
    right: 6px;
    bottom: 4px;
    font-size: 10px;
    color: #ccc;
  }
}
</style>